<template>
    <div>
          <!--头部-->
        <div>
          <div class="shouye">
            <div class="blue"></div>
            <h1>首页</h1>
          </div>

          <div class="title">
            <p class="t_p1">数据总览</p>
            <div class="t_box1">
              <div class="t_blue">
                <i class="el-icon-folder-add"></i>
                <i class="el-icon-circle-plus-outline"></i>
              </div>
              <div class="tbox1">
                <p class="tbox_p1">500</p>
                <p class="tbox_p2">今日预约人数</p>
              </div>
            </div>

            <div class="t_box2">
              <div class="t_blue">
                <i class="el-icon-circle-plus-outline"></i>
              </div>
              <div class="tbox1">
                <p class="tbox_p1">400</p>
                <p class="tbox_p2">今日挂号人数</p>
              </div>
            </div>

            <div class="t_box2">
              <div class="t_blue">
                <i class="el-icon-s-custom"></i>
                <i class="el-icon-circle-plus-outline"></i>
              </div>
              <div class="tbox1">
                <p class="tbox_p1">50000</p>
                <p class="tbox_p2">今日门诊充值总额</p>
              </div>
            </div>

            <div class="t_box2">
              <div class="t_blue">
                <i class="el-icon-s-data"></i>
                <i class="el-icon-circle-plus-outline"></i>
              </div>
              <div class="tbox1">
                <p class="tbox_p1">40000</p>
                <p class="tbox_p2">今日门诊消费总额</p>
              </div>
            </div>

            <div class="t_box2">
              <div class="t_blue">
                <i class="el-icon-view"></i>
              </div>
              <div class="tbox1">
                <p class="tbox_p1">678</p>
                <p class="tbox_p2">今日绑卡人数</p>
              </div>
            </div>
          </div>
        </div>
         <!--图表-->
        <div>
          <!--柱状图-->
          <div>
            <p class="zhu_p">进7日预约挂号情况</p>
            <div id="main" ref="chart" style="width:600px;height:400px"></div>
          </div>

          <!--折线图-->
          <div>
            <p class="zhe_p">近7日门诊充值趋势</p>
            <div class="main1" ref="chart1" style="width:600px;height:400px"></div>
          </div>
        </div>
         <!--实时挂号-->
        <div>
          <div class="guahao">
            <p class="gh_p">实时挂号</p>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="name" label="患者姓名"> </el-table-column>
              <el-table-column prop="phone" label="患者手机号码">
              </el-table-column>
              <el-table-column prop="keshi" label="挂号科室"> </el-table-column>
              <el-table-column prop="feiyong" label="挂号费用">
              </el-table-column>
              <el-table-column prop="date" label="挂号时间"> </el-table-column>
            </el-table>
          </div>

          <div class="keshi">
            <p class="gh_p">热门科室</p>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="paiming" label="排名"> </el-table-column>
              <el-table-column prop="rmkeshi" label="科室"> </el-table-column>
              <el-table-column prop="ksnum" label="挂号量"> </el-table-column>
            </el-table>
          </div>

          <div class="yisheng">
            <p class="gh_p">热门医生</p>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="paiming" label="排名"> </el-table-column>
              <el-table-column prop="doctorname" label="医生姓名">
              </el-table-column>
              <el-table-column prop="ysnum" label="挂号量"> </el-table-column>
            </el-table>
          </div>
        </div>
    </div>
</template>

<script>
 export default {
  //挂号，科室，医生
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "张三",
          keshi: "内科-肾内科",
          phone: "15678900988",
          feiyong: "60.00",
          paiming: "1",
          rmkeshi: "肾内科",
          doctorname: "王明宇",
          ksnum: "202",
          ysnum: "120"
        },
        {
          date: "2016-05-02",
          name: "张三",
          keshi: "内科-肾内科",
          phone: "15678900988",
          feiyong: "60.00",
          paiming: "2",
          rmkeshi: "眼科",
          doctorname: "连然",
          ksnum: "200",
          ysnum: "100"
        },
        {
          date: "2016-05-02",
          name: "张三",
          keshi: "内科-肾内科",
          phone: "15678900988",
          feiyong: "60.00",
          paiming: "3",
          rmkeshi: "心血管内科",
          doctorname: "傅新",
          ksnum: "189",
          ysnum: "90"
        },
        {
          date: "2016-05-02",
          name: "张三",
          keshi: "内科-肾内科",
          phone: "15678900988",
          feiyong: "60.00",
          paiming: "4",
          rmkeshi: "发热门诊",
          doctorname: "李卓然",
          ksnum: "123",
          ysnum: "80"
        },
        {
          date: "2016-05-02",
          name: "张三",
          keshi: "内科-肾内科",
          phone: "15678900988",
          feiyong: "60.00",
          paiming: "5",
          rmkeshi: "心血管",
          doctorname: "吴鸣",
          ksnum: "120",
          ysnum: "70"
        },
        {
          date: "2016-05-02",
          name: "张三",
          keshi: "内科-肾内科",
          phone: "15678900988",
          feiyong: "60.00",
          paiming: "6",
          rmkeshi: "比科",
          doctorname: "张三",
          ksnum: "90",
          ysnum: "60"
        }
      ],
      //柱状图
      option1: {
        xAxis: {
          type: "category",
          data: [
            "1月1日",
            "1月2日",
            "1月3日",
            "1月4日",
            "1月5日",
            "1月6日",
            "1月7日"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar"
          }
        ]
      },
      //折线图
      option2: {
        xAxis: {
          type: "category",
          data: [
            "1月1日",
            "1月2日",
            "1月3日",
            "1月4日",
            "1月5日",
            "1月6日",
            "1月7日"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "line"
          }
        ]
      }
    };
  },
  methods: {
    drawChart() {
      const chart = this.$refs.chart;
      let myChart = this.$echarts.init(chart);
      myChart.setOption(this.option1);
    },
    drawChart1() {
      const chart1 = this.$refs.chart1;
      let myChart1 = this.$echarts.init(chart1);
      myChart1.setOption(this.option2);
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    }
  },
  mounted() {
    this.drawChart();
    this.drawChart1();
  }
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.shouye {
  margin-top: 10px;
}
.blue {
  width: 36px;
  height: 12px;
  background-color: blue;
  float: left;
  margin-left: 20px;
  margin-top: 6px;
  border-radius: 50px;
}
.shouye h1 {
  float: left;
  margin-top: -4px;
  margin-left: 10px;
}
.title {
  width: 100%;
  margin-left: 20px;
  display: block;
}
.t_box1 {
  width: 260px;
  height: 90px;
  background-color: #f0f0f5;
  padding-top: 14px;
  border-radius: 4px;
  float: left;
}
.t_box2 {
  width: 260px;
  height: 90px;
  background-color: #f0f0f5;
  padding-top: 14px;
  border-radius: 4px;
  float: left;
  margin-left: 20px;
}
.t_blue {
  width: 80px;
  height: 80px;
  background-color: #b3ccff;
  border-radius: 6px;
  margin-left: 20px;
  float: left;
}
.t_p1 {
  height: 80px;
  width: 150px;
  margin-top: -30px;
  margin: 0px;
}
.tbox1 {
  width: 120px;
  height: 80px;
  margin-left: 110px;
  margin-top: -30px;
}
.tbox_p1 {
  font-size: 30px;
}
.tbox_p2 {
  font-size: 14px;
  margin-top: -20px;
  color: #b3b3cc;
}
.el-icon-folder-add {
  font-size: 40px;
  margin-top: 16px;
  color: #fff;
}
.el-icon-view {
  font-size: 40px;
  margin-top: 16px;
  color: #fff;
}
.el-icon-circle-plus-outline {
  font-size: 40px;
  margin-top: 16px;
  color: #fff;
}
.el-icon-s-custom {
  font-size: 40px;
  margin-top: 16px;
  color: #fff;
}
.el-icon-s-data {
  font-size: 40px;
  margin-top: 16px;
  color: #fff;
}

.guahao {
  margin-top: 4px;
  margin-left: 16px;
  width: 600px;
  height: 380px;
  float: left;
  box-shadow: 8px 8px 8px 8px #f0f0f5;
}
.gh_p {
  width: 200px;
  height: 20px;
  margin-left: -55px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.keshi {
  margin-top: 40px;
  margin-left: 16px;
  width: 320px;
  height: 380px;
  margin-left: 680px;
  box-shadow: 8px 8px 8px 8px #f0f0f5;
}
.yisheng {
  margin-top: 16px;
  margin-left: 16px;
  width: 320px;
  height: 380px;
  margin-left: 1080px;
  margin-top: -396px;
  box-shadow: 8px 8px 8px 8px #f0f0f5;
}
.zhu_p {
  width:200px;
  margin-left: 10px;
  margin-top: 120px;
}


#main {
  float: left;
  box-shadow: 8px 8px 8px 8px #f0f0f5;
  margin-left: 10px;
}
.main1 {
  margin-left: 760px;
  box-shadow: 8px 8px 8px 8px #f0f0f5;
}
.zhe_p {
  margin-left: 280px;
  margin-top: -30px;
}
</style>
